<template>
  <div class="navbox">
    <div class="nav">
      <img src="@/assets/images/nav/eth.png">
      <div class="title">ETH</div>
      <div>Farming</div>
      <div class="flex-1">
        <languageAuto></languageAuto>
      </div>
      <div class="connect" @click="connectWallet" v-if="!address">Connect</div>
      <div v-else class="address">
        {{ address.substring(0, 4) + '...' + address.substring(38, 42) }}
      </div>
    </div>
    <div class="headerbox">
      <div class="bgimg">
        <img class="topleft" src="@/assets/images/nav/eth.png">
        <img class="bg1" src="@/assets/images/nav/headerimg.png" />
      </div>

      <div class="tip">
        <div class="tip1">Liquidity Farming</div>
        <div class="tip2">Farm daily interest on USDT by providing liquidity for ETH farming pools.</div>
        <slot></slot>
      </div>

    </div>
    <!--    <div class="service">-->
    <!--      ...-->
    <!--    </div>-->
    <van-popup v-model:show="show" :style="{ padding: '64px' }">
      弹框内容
    </van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";
import languageAuto from "@/components/languageAuto.vue";
export default {
  components: {
    languageAuto
  },
  data() {
    return {
      msg: '32132132',
      show: false
    }
  },
  computed: {
    ...mapState('user', ['address'])
  },
  methods: {
    connectWallet() {
      this.$onboard.connectWallet()
    }
  }
}
</script>

<style scoped>
.navbox {
  position: relative;
  height: 100vh;
  padding: 0 10px;
  background: linear-gradient(92.32deg, #2948d8 3.18%, rgba(30, 62, 199, .78) 57.89%, rgba(41, 115, 194, .679867) 95.63%, rgba(11, 119, 180, .62) 113.34%);
}

.nav {
  height: 70px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  color: white;
  align-items: center;
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, #619cf3 50%, rgba(206, 226, 255, .5) 72.66%, rgba(132, 181, 255, .5) 81.25%, hsla(0, 0%, 100%, .5)) 1;
}

.nav img {
  width: 39px;
  height: 39px;
}

.nav .title {
  margin-right: 10px;
}

.headerbox {
  color: white;
  //padding: 50px 0 90px 0;
  //padding: 116px 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.headerbox .bgimg {
  width: 260px;
  height: 212px;
  margin: 0 auto;
  position: relative;
}

.headerbox .bgimg .bg1 {
  opacity: 0.5;
  width: 100%;
  height: 100%;

}

.headerbox .bgimg .topleft {
  width: 35px;
  height: 35px;
  position: absolute;
  left: 78px;
  top: 15px;
  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

.tip {
  width: 100%;
  position: absolute;
  top: 48%;
}

.tip .tip1 {
  font-family: Josefin Sans, Serif;
  font-weight: 700;
  color: white;
  font-size: 24px;
}

.tip .tip2 {
  font-family: Josefin Sans, Serif;
  color: white;
  font-size: 13px;
}

.flex-1 {
  flex: 1;
}

.connect {
  border: 2px solid white;
  padding: 5px 15px;
  font-size: 16px;
  border-radius: 5px;
  font-weight: 500;
}

.address {
  font-size: 12px;
  padding: 5px;
  background: #fff;
  border-radius: 15px;
  color: rgb(41, 74, 224);

}

.service {
  position: fixed;
  top: 71%;
  right: 10px;
  z-index: 99999999;
  width: 45px;
  line-height: 30px;
  text-align: center;
  background: #fff;
  border-radius: 100%;
  height: 45px;
  box-shadow: 1px 1px 10px #00000060;
  font-size: 30px;
}

.van-popup {
  border-radius: 10px;
  overflow: scroll;
  width: 80%;
  max-height: 60vh;
  padding: 10px !important;
}
</style>
